﻿<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>${pageTitle}</title>
    <meta name="keywords" content="${pageTitle}">
    <meta name="description" content="${pageTitle}">
    <meta name="author" content="勿扰博客">

    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/bootstrap3/css/bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/bootstrap3/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/blog.css">

    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.mobile.css">

    <script src="${pageContext.request.contextPath}/static/bootstrap3/js/jquery-1.11.2.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/bootstrap3/js/bootstrap.min.js"></script>
    <!-- 图片点击放大 -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/js/lrtk.css"/>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery.imgbox.pack.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            if (IsPC()) {
                $("#wyy").html("<iframe frameborder='0' border='0' marginwidth='0' marginheight='0' width=104% height=450 src='//music.163.com/outchain/player?type=0&id=517939977&auto=1&height=430'></iframe>");
                $(".tianqi").css("float", "right");
                $(".titleImg").css("width", "auto");
            } else {
                $("#wyy").html("<iframe frameborder='0' border='0' marginwidth='0' marginheight='0' width=104% height=450 src='//music.163.com/outchain/player?type=0&id=909485467&auto=1&height=430'></iframe>");
                $(".titleImg").css("width", "358px");
                $(".tianqi").css("margin-right", "45px");
                $(".lb_info").html("");
            }


            //颜色
            $("body").css("background-color", "${color}");
            //日志日期
            var $li = $('ul[class=c]').find('li');
            var $more = $('ul[class=c]').find('#more');
            for (var i = 0; i < $li.length; i++) {
                i < 5 ? $li.eq(i).show() : $li.eq(i).hide();
            }
            $li.length > 5 ? $more.show() : $more.hide();
            //日志类别
            var $li = $('ul[class=c1]').find('li');
            var $more1 = $('ul[class=c1]').find('#more1');
            for (var i = 0; i < $li.length; i++) {
                i < 5 ? $li.eq(i).show() : $li.eq(i).hide();
            }
            $li.length > 5 ? $more1.show() : $more1.hide();
            //热门文章
            var $li = $('ul[class=c2]').find('li');
            var $more1 = $('ul[class=c2]').find('#more2');
            for (var i = 0; i < $li.length; i++) {
                i < 5 ? $li.eq(i).show() : $li.eq(i).hide();
            }
            $li.length > 5 ? $more1.show() : $more1.hide();

            //图片点击放大
            $("#suoluetu").imgbox({
                'speedIn': 800,
                'speedOut': 10,
                'alignment': 'center',
                'overlayShow': true,
                'allowMultiple': false
            });
        });

        function btnclick() {
            var $li = $('ul[class=c]').find('li');
            var $more = $('ul[class=c]').find('#more');
            for (var i = 0; i < $li.length; i++) {
                $li.eq(i).show();
            }
            $li.length > 5 ? $more.hide() : $more.show();
        }

        function btnclick1() {
            var $li = $('ul[class=c1]').find('li');
            var $more = $('ul[class=c1]').find('#more1');
            for (var i = 0; i < $li.length; i++) {
                $li.eq(i).show();
            }
            $li.length > 5 ? $more.hide() : $more.show();
        }

        function btnclick2() {
            var $li = $('ul[class=c2]').find('li');
            var $more = $('ul[class=c2]').find('#more2');
            for (var i = 0; i < $li.length; i++) {
                $li.eq(i).show();
            }
            $li.length > 5 ? $more.hide() : $more.show();
        }

        <!--浏览器判断-->
        function IsPC() {
            var userAgentInfo = navigator.userAgent;
            var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];    //常用的手机系统版本
            var flag = true;    //建立标志
            for (var v = 0; v < Agents.length; v++) {
                if (userAgentInfo.indexOf(Agents[v]) > 0) {
                    flag = false;    //如果是手机版本返回false
                    break;
                }
            }
            return flag;
        }
    </script>

    <!--百度MIP加速代码 -->
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <!--TODO: canonical href需要替换成原页面url-->
    <link rel="canonical" href="http://www.wurao.xin/index.html">
    <!-- noscript 标签是为了在不支持 script 的环境下快速的展现 MIP 页面，推荐使用 -->
    <noscript>
        <style mip-officialrelease>
            body {
                -webkit-animation: none;
                -moz-animation: none;
                -ms-animation: none;
                animation: none;
            }
        </style>
    </noscript>
</head>

<!--百度 wurao.xin-->
<meta name="baidu-site-verification" content="ofntvPJNqu"/>

<body>
<!-- 容器 -->
<div class="container">
    <!-- 头 -->
    <jsp:include page="/foreground/common/head.jsp"></jsp:include>
    <!-- 导航栏 -->
    <jsp:include page="/foreground/common/menu.jsp"></jsp:include>
    <div class="row">
        <!-- 最新博主日志 -->
        <div class="col-md-9">
            <jsp:include page="${mainPage}"></jsp:include>
        </div>
        <!-- 博主信息 -->
        <div class="col-md-3">
            <div class="data_list">
                <div class="data_list_title">
                    <img src="${pageContext.request.contextPath}/static/images/user_icon.png"/>
                    博主信息
                </div>
                <div class="user_image">
                    <a id="suoluetu" title="勿扰" href="http://www.wurao.xin/static/userImages/${blogger.imageName}">
                        <%-- 方圆矩角  <img style="border-radius:30px;-moz-border-radius:30px;"  src="http://www.wurao.xin/static/userImages/static/userImages/${blogger.imageName}" /> --%>
                        <img style="width:234px; height:234px; border-radius:50%; overflow:hidden;"
                             src="http://www.wurao.xin/static/userImages/${blogger.imageName}"/>
                    </a>
                </div>
                <br>
                <div class="nickName"><font color="red">${blogger.nickName }</font></div>
                <div class="userSign"><font size="1">简介：${blogger.sign}</font></div>
                <div class="userSign"><font size="2"><strong>${years}</strong></font></div>
            </div>
            <div id="wangyiyun" style="margin-left:-10px">
                <!-- 网易云音乐 -->
                <span id="wyy"></span>
            </div>
            <!-- qq  -->
            <div class="data_list">
                <div>
                    <strong>QQ</strong>
                </div>
                <div class="datas">
                    <ul>
                        <c:if test="${qqblogger!=null}">
                            <li>
                                <div style="text-align:center;font-size : 1.5em;">
                                    <img style="border-radius:30px;-moz-border-radius:30px;"
                                         src="${qqblogger.imageName}"/>
                                    <div>
                                        <font style="color:red;"><a href="/login.jsp">${qqblogger.nickName} </a><img
                                                src="http://i.gtimg.cn/vipstyle/global/img/level_v2/svip8.png"/></font>
                                    </div>
                                </div>
                            </li>
                        </c:if>
                        <c:if test="${qqblogger==null}">
                            <li><a href="${pageContext.request.contextPath}/blogger/qqLogin.html"><img
                                    src="${pageContext.request.contextPath}/static/images/qq3.png" width="65px"/></a>
                            </li>
                        </c:if>
                    </ul>
                </div>
            </div>
            <!-- 热门文章  -->
            <div class="data_list">
                <div class="data_list_title">
                    <img src="${pageContext.request.contextPath}/static/images/article.png"/>
                    热门文章
                </div>
                <div class="datas">
                    <ul class="c2">
                        <c:forEach items="${blogTopCountList}" var="blogTypeTopCount" varStatus="status">
                            <li>
											<span>
												<font style="background-color: #ff5722;color:#f5f5f5;">&nbsp;${status.index}&nbsp;</font>&nbsp;&nbsp;
												<a title="${blogTypeTopCount.title}"
                                                   href="${pageContext.request.contextPath}/blog/articles/${blogTypeTopCount.id}.html">${blogTypeTopCount.title.length()>12?blogTypeTopCount.title.substring(0,10):blogTypeTopCount.title}...</a>
												<font style="float:right;">(${blogTypeTopCount.clickHit})</font>
											</span>
                            </li>
                        </c:forEach>
                        <li id="more2" onclick="btnclick2();"><a class="layui-btn layui-btn-warm layui-btn-xs">更多</a>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 日志 -->
            <div class="data_list">
                <div class="data_list_title">
                    <img src="${pageContext.request.contextPath}/static/images/byType_icon.png"/>
                    日志类别
                </div>
                <div class="datas">
                    <ul class="c1">
                        <c:forEach items="${blogTypeCountList }" var="blogTypeCount" varStatus="status">
                            <li><span><a
                                    href="${pageContext.request.contextPath}/index.html?typeId=${blogTypeCount.id}">${blogTypeCount.typeName}<font
                                    style="float:right">(${blogTypeCount.blogCount}篇)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</font></a></span>
                            </li>
                        </c:forEach>
                        <li id="more1" onclick="btnclick1();"><a class="layui-btn layui-btn-warm layui-btn-xs">更多</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="data_list">
                <div class="data_list_title">
                    <img src="${pageContext.request.contextPath}/static/images/byDate_icon.png"/>
                    日志日期
                </div>
                <div class="datas">
                    <ul class="c">
                        <c:forEach items="${blogCountList }" var="blogCount" varStatus="status">
                            <li><span><a
                                    href="${pageContext.request.contextPath}/index.html?releaseDateStr=${blogCount.releaseDateStr}">${blogCount.releaseDateStr}<font
                                    style="float:right">(${blogCount.blogCount}篇)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</font></a></span>
                            </li>
                        </c:forEach>
                        <li id="more" onclick="btnclick();"><a class="layui-btn layui-btn-warm layui-btn-xs">更多</a></li>
                    </ul>
                </div>
            </div>
            <div class="data_list">
                <div class="data_list_title">
                    <img src="${pageContext.request.contextPath}/static/images/link_icon.png"/>
                    友情链接
                </div>
                <div class="datas">
                    <ul>
                        <c:forEach items="${linkList}" var="link">
                            <li><span><a href="${link.linkUrl}" target="_blank">${link.linkName }</a></span></li>
                        </c:forEach>
                    </ul>
                </div>
            </div>
            <div class="data_list">
                <div class="data_list_title">
                    <img src="${pageContext.request.contextPath}/static/images/connecting.png"/>
                    趣味站
                </div>
                <div class="datas">
                    <ul>
                        <li><span><a href="${pageContext.request.contextPath}/blog/qq.html"
                                     target="_blank">在线聊天室</a></span></li>
                    </ul>
                    <ul>
                        <li><span><a href="${pageContext.request.contextPath}/blog/vip.html" target="_blank">VIP在线解析</a></span>
                        </li>
                    </ul>
                    <ul>
                        <li><span><a href="http://music.junyuewl.com/?tdsourcetag=s_pcqq_aiomsg" target="_blank">爱音乐</a></span>
                        </li>
                    </ul>
                </div>

            </div>
        </div>
    </div>
    <jsp:include page="/foreground/common/foot.jsp"></jsp:include>
</div>
</body>
</html>